<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		请选择:
		<select id="pro"></select>省<select id="city"></select>市
		<script type="text/javascript">
			let provinces=[]//表示的是数据,所有的省
			let pro=document.getElementById("pro")//表示页面上的省下拉列表
			let city=document.getElementById("city")//表示页面上的市下拉列表\
			
			
			function init(){
				let xhr=new XMLHttpRequest()
				xhr.open("GET","city.json",false)
				xhr.send()
				var data=xhr.responseText//接受服务器的数据,以纯文本方式接受数据
				provinces=JSON.parse(data)//将JSON文件中的文本数据转换为对象
				for (var i = 0; i < provinces.length; i++) {
					pro.options[i]=new Option(provinces[i].name)//将第i个省份的名字写入第一个下拉列表
				}
				//将第一个省的所有市加载到市的下拉列表中
				for (let i = 0; i < provinces[0].city.length; i++) {
					city.options[i]=new Option(provinces[0].city[i]);
				}
			}
			pro.onchange = function(){
				let n = pro.selectedIndex;
				city.length = 0;
				for (let i = 0; i < provinces[n].city.length; i++) {
					city.options[i]=new Option(provinces[n].city[i]);
				}
			}
		</script>
	</body>
</html>
